import {useState,useEffect} from 'react'
import {useLocation,useNavigate,Outlet} from 'react-router-dom'
// import axios from 'axios'
import { throttle } from 'lodash';

import './css/studio.css'
import Infinlist from './wycomponents/Infinlist.tsx'

import { Flex , Input , Select , DatePicker , Button , Tabs } from 'antd';
const { Search  } = Input;

import type { TabsProps } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';

const items: TabsProps['items'] = [
    {
      key: '1',
      label: '全部',
      children:<Infinlist></Infinlist>,
    },
    {
      key: '2',
      label: '待接诊',
      children:<div>2</div> ,
    },
    {
      key: '3',
      label: '已接诊',
      children:<div>3</div> ,
    },
  ];


const main = {
    width: '90%',
    height: '80vh',
    borderRadius: 6,
    // border:'1px solid blue',
};
const left = {
    width: '20%',
    height: '100%',
    borderRadius: 6,
    // border:'1px solid red',
    background:'white'
};
const leftop = {
    width: '95%',
    // height: '110px',
    height: '18%',
    borderRadius: 6,
    // border:'1px solid red',
};
const leftop0 = {
    width: '100%',
    height: '30px',
    borderRadius: 6,
    // border:'1px solid red',
};
const leftop2 = {
    width: '100%',
    height: '30px',
    borderRadius: 6,
    // border:'1px solid red',
};
const lefbottom = {
    width: '95%',
    height: '80%',
    borderRadius: 6,
    // border:'1px solid red',
    overflow: 'auto'
};
const right = {
    width: '80%',
    height: '100%',
    borderRadius: 6,
    // border:'1px solid red',
    background:'white'
};
const rightop = {
    width: '100%',
    height: '12%',
    // borderRadius: 6,
    // borderBottom:'1px solid red',
};
const righbottom = {
    width: '100%',
    height: '88%',
    borderRadius: 6,
    // border:'1px solid red',
};
const righbolfe = {
    width: '6%',
    height: '100%',
    // borderRadius: 6,
    // border:'1px solid red',
}
const righborht = {
    width: '94%',
    height: '100%',
    borderRadius: 6,
    // border:'1px solid red',
}
const rightp1 = {
    width: '20%',
    height: '80%',
    borderRadius: 6,
    fontSize:'12px',
    color:'gray',
    // border:'1px solid red',
}
const rightp2 = {
    width: '50%',
    height: '80%',
    borderRadius: 6,
    fontSize:'12px',
    color:'gray',
    // border:'1px solid red',
}
const rightp3 = {
    width: '10%',
    height: '80%',
    borderRadius: 6,
    fontSize:'12px',
    color:'gray',
    // border:'1px solid red',
}
let rightp3btn = {
    width:'70px',
    height:'25px',
    fontSize:'12px',
}
let rightblfbtn = {
    width:'50px',
    height:'50px',
    fontSize:'10px',
}


export default function Studio(){
        let [tab,settab] = useState([
            {'id':0,'name':'病历','path':'/frame/studio/mere'},
            {'id':1,'name':'医嘱开具','path':'/frame/studio/doss'},
            {'id':2,'name':'入院证','path':'/frame/studio/gohs'},
            {'id':3,'name':'远程会诊','path':'/frame/studio/oe'},
            {'id':4,'name':'手术预约','path':'/frame/studio/op'},
            {'id':5,'name':'疾病上报','path':'/frame/studio/nt'}
        ])
        const handleChange = (value: string) => {
            console.log(`selected ${value}`);
        };
        const onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {
            console.log(date, dateString);
        };
        let navigator = useNavigate()
        let btngo = (info:string)=>{
            navigator(info)
        }

        const btnnext = () => {
            console.log('next');
        };
        const btnto = throttle(btnnext, 2000);


    useEffect(()=>{

    },[])

    return (
        <>
            <Flex gap="small" style={main} >
                <Flex wrap gap="small" justify='space-around' align='center' style={left}>
                    <Flex wrap gap="small" justify='space-around' align='center' style={leftop}>
                        <Flex  gap="middle" justify='space-around' align='center' style={leftop0}>
                            <DatePicker onChange={onChange} needConfirm className='adata' />
                            <Select
                                className='aselect'
                                defaultValue="今日"
                                onChange={handleChange}
                                options={[
                                    { value: 'today', label: '今日' },
                                    { value: 'tommore', label: '明日' },
                                    { value: 'threeday', label: '近三天' },
                                    { value: 'seven', label: '近七天' },
                                    { value: 'month', label: '近一个月' }
                                ]}
                            />
                        </Flex>
                        <Flex wrap gap="middle" style={leftop0}>
                            <Search placeholder="可输入门诊号、卡号、姓名"  />
                        </Flex>
                        <Flex  gap="middle"  justify='space-around' align='center' style={leftop2}>
                            <Button type="primary"  className='abtn' onClick={btnto}>下一位</Button>
                            <Button  className='abtn'>重新呼叫</Button>
                            <Button  className='abtn'>刷新患者</Button>
                        </Flex>
                    </Flex>
                    <Flex  style={lefbottom}>
                        <Tabs defaultActiveKey="1" centered  items={items} className='tabchage'/>
                    </Flex>
                </Flex>
                <Flex wrap style={right}>
                    <Flex wrap gap="middle" justify='space-around' align='center' style={rightop}>
                        <Flex wrap gap="middle" style={rightp1}>
                            <div>
                                <span>小明</span>
                                <span>男</span>
                                <span>20岁</span>
                            </div>
                            <div>门诊号：20001102</div>
                        </Flex>
                        <Flex wrap gap="middle" style={rightp2}>
                            <span>联系电话：12444444444</span>
                            <span>证件号：1011777777777</span>
                            <span>就诊卡号：932222222222</span>
                            <span>患者性质：医保</span>
                            <span>就诊时间：2000-09-01 8:00-9:00</span>
                        </Flex>
                        <Flex wrap justify='space-around' align='center' style={rightp3}>
                            <Button type="primary" style={rightp3btn}>患者病史</Button>
                            <Button danger style={rightp3btn}>结束会诊</Button>
                        </Flex>
                    </Flex>
                    <Flex  style={righbottom}>
                        <Flex wrap gap="small" vertical justify='flex-start' align='center' style={righbolfe}>
                            {
                                tab.map((item,index)=>(
                                    <Button onClick={()=>{btngo(item.path)}} key={index} style={rightblfbtn}>{item.name}</Button>
                                ))
                            }
                        </Flex>
                        <Flex style={righborht}>
                            <Outlet></Outlet>
                        </Flex>  
                    </Flex>
                </Flex>
            </Flex>

        </>
    )
}